<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '250px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      required: true
    },
    start: {
      type: Number,
      default: 0
    },
    end: {
      type: Number,
      default: 100
    },
  },
  data() {
    return {
      chart: null,
      s:0,
      e:100
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        let xData = [];
        let yData = [];
        this.chartData.forEach((item,index)=>{
          xData.push(item.warmingTime);
          yData.push(item.temperature);
        })
        this.setOptions(xData,yData)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      let xData = [];
      let yData = [];
      let arr=0
      this.chartData.forEach((item,index)=>{
        xData.push(item.warmingTime);
        yData.push(item.temperature);
        arr=index
      })
      this.setOptions(xData,yData);
      let that = this;
       this.chart.on("dataZoom", function (params) {
        let startValue = 0;
        let endValue = 0;
        let end = 0,start = 0;
        let lenghts = 0;

        if (params.batch) {
          startValue = params.batch[0].startValue;
          endValue = params.batch[0].endValue;
        } else {
          start = params.start;
          end = params.end;
          startValue = Math.round(start * 0.01 * arr);
          endValue = Math.round(end * 0.01 * arr);
        }
         that.$emit('receive',startValue,endValue);
        console.log("最小下标", startValue + " 最大下标", endValue);
      });
    },
    setOptions(xData,yData) {
      //计算百分比
      if(this.start)
      this.s = this.start/xData.length*100;
      if(this.end)
      this.e = this.end/xData.length*100;
      this.chart.setOption({
        toolbox: {
          feature: {
            dataZoom: {
              show:true,
              yAxisIndex: 'none',
              title:{zoom:'区域选择',back:''},
              icon:{
                back: 'image://images/null.png',
              }
            },
            myTool1: {
              show: true,
              title: '重新选择',
              icon:'path://M971.64 699.44l-59.87-117.08a25 25 0 0 0-33.64-10.88L761 631.34a25 25 0 0 0 22.76 44.52l61.72-31.55c-63.77 141.46-204.11 233.6-362.61 233.6-174.55 0-327.09-111.74-379.57-278a25 25 0 1 0-47.68 15A448.77 448.77 0 0 0 215.6 839.44c77.71 57.88 170.15 88.47 267.31 88.47s189.59-30.59 267.3-88.47a449.14 449.14 0 0 0 144-181.68l33 64.45a25 25 0 0 0 44.52-22.77zM93.06 461.29a25 25 0 0 0 11.36-2.75L222.86 398a25 25 0 0 0-22.77-44.51L137 385.75c64.39-143.61 206.66-237.21 367.38-237.21C681 148.54 835.42 261.65 888.55 430a25 25 0 1 0 47.68-15 453.55 453.55 0 0 0-161.69-227c-78.55-58.5-172-89.43-270.21-89.43S312.67 129.47 234.12 188A454 454 0 0 0 88.35 372.19l-33.61-65.73a25 25 0 1 0-44.52 22.76l60.56 118.44a25 25 0 0 0 22.28 13.63z',
              onclick:()=>{
                this.s=0;
                this.e=100;
                let option =  this.chart.getOption();
                option.dataZoom[0].start =0;
                option.dataZoom[0].end =100;
                this.chart.setOption(option)
                this.$emit('receive',0,xData.length);
              }
            },
            myRestore: {
              show: true,
              title:'还原',
              icon:'path://M594.8 266.4H226.6l73.5-73.5-35.4-35.4-134.3 134.4 134.4 134.4 35.4-35.4-74.5-74.5h369c33.7 0.1 66.3 6.8 96.9 19.9 29.7 12.6 56.3 30.7 79.2 53.6 22.9 23 40.8 49.7 53.4 79.4 13 30.7 19.5 63.4 19.5 97.1 0 33.7-6.6 66.3-19.5 97.1-12.5 29.7-30.5 56.4-53.4 79.4-22.9 23-49.5 41-79.2 53.6-30.7 13.1-63.3 19.8-96.9 19.9H134.2v50h460.6c165.1-0.7 298.8-134.7 298.8-300s-133.7-299.3-298.8-300z',
              onclick:()=>{
                this.$emit('chartReset');
                this.$nextTick(() => {
                  this.s = this.start/xData.length*100;
                  this.e = this.end/xData.length*100;
                  let option =  this.chart.getOption();
                  option.dataZoom[0].start =this.s;
                  option.dataZoom[0].end =this.e;
                  this.chart.setOption(option)
                })

              }
            },
          },
        },
        dataZoom: [
          {
            type: "slider",
            id: "sliderX",
            show: true,
            // zoomLook:false,
            start: this.s,
            realtime: false, //拖动滚动条时是否动态的更新图表数据
            end: this.e,
            showDetail: true, //即拖拽时候是否显示详细数值信息 默认true
            brushSelect: false,
          },
          {
            type: "inside",
            end: 100,
            start: 0,
            zoomOnMouseWheel:false
          },
        ],
        xAxis: {
          name:"增温时间",
          data: xData,
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 50,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: ['温度']
        },
        series: [{
          name: '温度',
          itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: yData,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        }
          ]
      })
    }
  }
}
</script>
